<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>InputMask - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />
<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />

<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>

<script type="text/javascript" src="../build/widget/WidgetHelper.source.js"></script>
<script type="text/javascript" src="../build/widget/form/InputMask.source.js"></script>
<script type="text/javascript" src="../build/widget/form/SimpleInput.source.js"></script>
</head>

<body>
<!-- test widget.InputMask -->
<style type="text/css">
	.panel { width: 620px; border: 1px solid #6997D1; margin: 10px; padding: 10px }
	.panel ul { margin: 0 0 20px 0 }
	.panel ul li { margin: 5px 0; padding: 5px 0; clear: both }
	.panel label { width: 150px; text-align: right; display: block; float: left }
	.panel input { vertical-align: top; float: left; width: 160px }
	
	.tips {
		display: -moz-inline-box; display: inline-block; zoom: 1; *display: inline;
		color: #666;
		width: 260px; height: 15px;
		float: left;
		margin-left: 5px;
		padding-left: 20px
		}
	.warning { background: url('../assets/demo/warning.gif') no-repeat 0 0; padding-left: 20px; /*color: #f50; */ /*font-weight: bold*/ }
	.passed { background: url('../assets/demo/passed.gif') no-repeat 0 0; padding-left: 20px; text-indent: -9999px }
	li.error { background: #FEF4F0 }
	li.current { background: #E7FBFF }
</style>
<div class="panel" id="demo1">
	<pre>
	</pre>
	<form method="post" action="#">
		<ul>
			<li>
				<label for="eventTester">测试键盘事件：</label>
				<input type="text" value="" size="20" id="eventTester" />
				<span class="tips">请输入任意字符并观察Console中的输出</span>
				<div style="clear: both"></div>
			</li>
			<li>
				<label for="numberInput">中国的邮政编码：</label>
				<input type="text" value="" size="20" maxlength="6" id="numberInput" />
				<span class="tips">请输入6位数字，比如310099</span>
				<div style="clear: both"></div>
			</li>
			<li>
				<label for="memberInput">淘宝会员名：</label>
				<input type="text" value="" size="20" maxlength="20" id="memberInput" />
				<span class="tips">5-20个字符(可以为字母、数字、下划线和中文，其中一个汉字为两个字符）</span>
				<div style="clear: both"></div>
			</li>
			<li>
				<label for="passwordInput">密码：</label>
				<input type="password" value="" size="20" maxlength="16" id="passwordInput" />
				<span class="tips">密码由6-16个字符组成，请使用英文字母加数字或符号的组合密码，不能单独使用英文字母、数字或符号作为您的密码</span>
				<div style="clear: both"></div>
			</li>
		</ul>
		<div style="clear: both"></div>
	</form>
</div>

<script type="text/javascript">	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event,
		Ef = Unicorn.util.Effect;
					
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		test_widget_InputMask: function() {
			YAHOO.log('开始 test_widget_InputMask', 'case', 'testCase');
			
			// 测试键盘事件
			(function() {
				var et = D.get('eventTester');
				Unicorn.widget.SimpleInput.decorate(et);
				E.on(et, 'keydown', function() { YAHOO.log('keydown fired.', 'info', 'testCase'); });
				E.on(et, 'keypress', function() { YAHOO.log('keypress fired.', 'info', 'testCase'); });
				E.on(et, 'keyup', function() { YAHOO.log('keyup fired.', 'info', 'testCase'); });
				E.on(et, 'input', function() { YAHOO.log('input fired.', 'info', 'testCase'); });
				E.on(et, 'propertychange', function() { YAHOO.log('propertychange fired.', 'info', 'testCase'); });
			})();
			
			// 中国的邮政编码
			Unicorn.widget.SimpleInput.decorate(
				'numberInput',
				{ formatMask: /^\d{6}$/, keyMask: /\d/ }
			);
							
			// 淘宝会员名
			Unicorn.widget.SimpleInput.decorate(
				'memberInput',
				{ formatMask: /^[\w\u4e00-\u9fa5]+$/, 
				  keyMask: /[\w\u4e00-\u9fa5]/,
				  minLength: 5,
				  maxLength: 20
				}
			);
			
			// 淘宝密码
			(function() {
				var psdInput = new Unicorn.widget.SimpleInput(
					'passwordInput',
					{ formatMask: /^[\x20-\x7e]{6,16}$/, 
					  keyMask: /[\x20-\x7e]/,
					  minLength: 6,
					  maxLength: 16
					}
				);
				var psdTips = D.getElementsByClassName('tips', '*', psdInput.inputEl.parentNode)[0];
				var psdOriginalTips = psdTips.innerHTML;
				
				psdInput.onPass.subscribe(function() {
					var val = this.inputEl.value;

					if(/^\d+$/.test(val)) {
						psdTips.innerHTML = '密码不能全部为数字';
					} else if(/^[a-zA-Z]+$/.test(val)) {
						psdTips.innerHTML = '密码不能全部为字母';
					} else if(/^[^a-zA-Z\d]+$/.test(val)) {
						psdTips.innerHTML = '密码不能全部为符号';
					} else {
						return;
					}
					
					D.removeClass(psdTips, this.config.passedCls);
					D.addClass(this.inputEl.parentNode, this.config.errorCls);
					D.addClass(psdTips, this.config.warningCls);
				}, null, psdInput);
				
				var psdErrorHandler = function() {
					var val = this.inputEl.value;
					if(val.length < this.config.minLength) {
						psdTips.innerHTML = '密码长度不能小于' + this.config.minLength;
					} else if(val.length > this.config.maxLength) {
						psdTips.innerHTML = '密码长度不能大于' + this.config.maxLength;
					} else if(val.length == this.config.maxLength) {
						psdTips.innerHTML = '密码的长度不能超过' + this.config.maxLength;
					} else {
						psdTips.innerHTML = '密码只能由英文字母、数字或英文符号组成';
					}
				};
				psdInput.onError.subscribe(psdErrorHandler, null, psdInput);
				psdInput.onErrorInput.subscribe(psdErrorHandler, null, psdInput);
				
				var psdTipsReset = function() {
					psdTips.innerHTML = psdOriginalTips;
				};
				psdInput.onRightInput.subscribe(psdTipsReset);
				E.on(psdInput.inputEl, 'focus', psdTipsReset);
			})();
			
			YAHOO.log('结束 test_widget_InputMask', 'case', 'testCase');
		} 
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();
</script>
</body>
</html>
